<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <div class="channel-box">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" type="danger" plain size="mini">{{ isEdit ? '取消' : '编辑' }}</van-button>
      </div>
      <van-grid>
        <van-grid-item
          v-for="(item, index) in ownList"
          :key="item.id"
        >
          <span @click="chose(index)" :class="{active: value === index}">{{  item.name }}</span>
          <!-- 到时候这里可以放icon做删除 -->
          <van-icon @click="$emit('del', { id: item.id, index})"  v-show="isEdit && index !== 0" class="del-icon" name="cross" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="channel-box">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optList"
          :key="item.id"
          :text="item.name"
          @click="$emit('add', item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },

    // 要父传递过来的下标
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isEdit: false
    }
  },
  // model: {
  //   // 外界v-model这个组件的时候
  //   // 本来会生成:value=变量以及@input=变量=$vent
  //   // 但是这句话后，外界生成的 @input就变成了 @xx
  //   event: 'xx',
  //   // 它会把:value改成:active
  //   prop: 'active'
  // },
  methods: {
    chose (index) {
      // 1. 关闭sheet
      this.$emit('close')
      // 2. 通知父去选中对应的频道
      this.$emit('input', index)
    }
  },

  computed: {
    /*
    optList () {
      // 从全部数组里过滤出不在我的频道里的数据，就是可选频道
      const list = this.allList.filter(v => {
        // 找它在不在我的频道里
        const res = this.ownList.find(v2 => v.id === v2.id)

        if (res) {
          // 如果为true，代表它找到了，在我的频道里，那不要过滤出来
          // 就是return false
          return false
        } else {
          // 如果为false，才代表没找到，也就是不在我的频道里
          // 那就要过滤出来
          return true
        }
      })
      return list
    }
    */
    optList () {
      // 从全部数组里过滤出不在我的频道里的数据，就是可选频道
      // 从全部数组里过滤出不在我的频道里的数据，就是可选频道
      // return this.allList.filter(v => {
      //   // 找它在不在我的频道里
      //   const res = this.ownList.find(v2 => v.id === v2.id)
      //   // res为true就是return false，res为false就是return true
      //   // 那不就是return res取反吗？
      //   return !res
      // })
      // 继续优化
      // return this.allList.filter(v => {
      //   // 找它在不在我的频道里
      //   return !this.ownList.find(v2 => v.id === v2.id)
      // })
      // 最终优化
      return this.allList.filter(v => !this.ownList.find(v2 => v.id === v2.id))
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 0 20px;
  .channel-box {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }

    .del-icon {
      position: absolute;
      right: 5px;
      top:5px;
    }

    .active {
      color: red;
    }
  }
}
</style>
